import React,{useState,useEffect} from 'react'
import Head from 'next/head'
import Nav from '../components/nav'
import Header from '../components/Header.js'
import Author from '../components/Author.js'
import Advert from '../components/advert'
import Footer from '../components/Footer'

// import React,{useState,useEffect} from 'react'
import axios from 'axios'
import  servicePath  from '../config/apiUrl'
import Link from 'next/link'

import {Button, Row,Col,List,Icon, Avatar, Breadcrumb} from 'antd'
// import '../static/style/pages/index.css'
// 因为头部右部，广告，地步和首页index.js一样 都写成了组件，把内容复制过来简改
const MyList = (list) => {
//  const [mylist,setMylist] = useState(  [
//   {title:'React Hooks 免费视频教程(共11集)',context:'50元跟着胖哥学一年，掌握程序人的学习方法。 也许你刚步入IT行业，也许你遇到了成长瓶颈，也许你不知道该学习什么知识，也许你不会融入团队，也许...........'},
//   {title:'React Hooks 免费视频教程(共12集)',context:'50元跟着胖哥学一年，掌握程序人的学习方法。 也许你刚步入IT行业，也许你遇到了成长瓶颈，也许你不知道该学习什么知识，也许你不会融入团队，也许...........'},
//   {title:'React Hooks 免费视频教程(共13集)',context:'50元跟着胖哥学一年，掌握程序人的学习方法。 也许你刚步入IT行业，也许你遇到了成长瓶颈，也许你不知道该学习什么知识，也许你不会融入团队，也许...........'},
//   {title:'React Hooks 免费视频教程(共14集)',context:'50元跟着胖哥学一年，掌握程序人的学习方法。 也许你刚步入IT行业，也许你遇到了成长瓶颈，也许你不知道该学习什么知识，也许你不会融入团队，也许...........'},
// ])
const [ mylist , setMylist ] = useState(list.data);
//当数据更新会调用这个函数
useEffect(()=>{
  setMylist(list.data)
 })
 return(
  <div>
  <Head>
    <title>列表页</title>
    <link rel="icon" href="/favicon.ico" />
  </Head>
  {/* 头部 */}
  <Header />
  {/* 左侧栏 */}
   <Row className='comm-main' type='flex' justify='center'>
     <Col className='comm-left' xs={24} sm={24} md={16} lg={18} xl={14}>
         <div className='bread-div'>
         <Breadcrumb.Item><a href='/'>首页</a></Breadcrumb.Item>
         <Breadcrumb.Item>视频教程</Breadcrumb.Item>
         </div>
       <List header={<div>最新数据</div>} itemLayout="vertical" dataSource={mylist} renderItem={item=>(<List.Item>
        <div className="list-title">
          <Link href={{pathname:"/detailed",query:{id:item.id}}}>
            <a>{item.title}</a>
          </Link>
          </div>
        <div className="list-icon">
          <span><Icon type="calendar" /> 2019-06-28</span>
          <span><Icon type="folder" /> 视频教程</span>
          <span><Icon type="fire" /> 5498人</span>
        </div>
        <div className="list-context">{item.context}</div>  
         </List.Item>)}></List>
     </Col>
     <Col className="comm-right" xs={0} sm={0} md={7} lg={5} xl={4}>
      <Author/>
      <Advert />
    </Col>
   </Row>
   <Footer/>
</div>
 )
}
MyList.getInitialProps=async (context)=>{
 let id = context.query.id
 const promise = new Promise((resolve)=>{
  axios(servicePath.getListById+id).then(
    (res)=>resolve(res.data)
  )
 })
 return await promise
}
export default MyList
